<template>
    <div>
            <el-container>
                <el-header height='58px'>
                    <div class="header_img">
                        <img src="../assets/xiangm.png" alt="" srcset="">
                    </div>
                  
                        <el-radio-group v-model="isCollapse">
                            <el-radio-button @click.native.capture="clickone" :label="oneisColl">
                                <i :class="oneisColl? 'el-icon-s-unfold':'el-icon-s-fold' "></i>
                            </el-radio-button>
                        </el-radio-group>

                    <el-breadcrumb>
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item> {{$route.meta.title}} </el-breadcrumb-item>
                    </el-breadcrumb>


                </el-header>
                <el-container>
                    <div class="deng_left"> 
                        <el-menu default-active="1-4" class="el-menu-vertical-demo" :collapse="isCollapse">

                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-s-order"></i>
                                <span slot="title">医生管理</span>
                            </template>
                            <router-link to="/index/page">
                                <el-menu-item index="1-1">数据分析</el-menu-item>
                            </router-link>
                            <router-link to="/index/page1">
                                <el-menu-item index="1-1">添加医生</el-menu-item>
                            </router-link>
                            <router-link to="/index/page2">
                                <el-menu-item index="1-2">门诊挂号</el-menu-item>
                            </router-link>
                             <router-link to="/index/page3">
                                <el-menu-item index="1-3">医生评论管理</el-menu-item>
                            </router-link>
                             <router-link to="/index/page4">
                                <el-menu-item index="1-4">门诊挂号管理</el-menu-item>
                            </router-link>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-s-platform"></i>
                                <span slot="title">患者管理</span>
                            </template>
                            <router-link to="/index/page_1">
                                <el-menu-item index="1-1">挂号管理</el-menu-item>
                            </router-link>
                            <router-link to="/index/page_2">
                                <el-menu-item index="1-2">退号管理</el-menu-item>
                            </router-link>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span slot="title">即时通讯</span>
                            </template>
                            <router-link to="/index/page_one">
                                <el-menu-item index="1-1">对话</el-menu-item>
                            </router-link>
                           
                        </el-submenu>
                       
                        </el-menu>
                    </div>




                    <el-main>
                        <router-view></router-view>
                    </el-main>


                </el-container>
            </el-container>



    </div>
</template>

<script>
export default {
        data() {
            return {
                isCollapse: true,
                oneisColl:true,

            }
        },

        methods: {
            clickone(){
                if(this.isCollapse==true){
                    this.oneisColl=false
                }else{
                    this.oneisColl=true
                }

               
            }
        },
}
</script>

<style lang="scss" scoped>
 .el-header{
        background-color: #fff;
        display: flex;
        border-bottom: 3px solid #E4E7ED;
        .el-breadcrumb{
            line-height: 50px;
            font-size: 13px;
        }
        .header_img{
            img{
                width: 50px;
                height: 42px;
                margin-top: 6px;
                margin-left: -12px;
            }
        }
        .el-radio-group{
            margin-left: 50px;
            padding-right: 17px;
            margin-top: 7px;
           .el-icon-s-fold{
            font-size: 40px;
              
           }
           .el-icon-s-unfold{
            font-size: 40px;
           }
        }
}
::v-deep .el-radio-button__inner{
    padding: 0;
    border:none
}
::v-deep .el-radio-button:first-child .el-radio-button__inner{
    border:none;
}
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
    box-shadow: -1px 0 0 0 transparent;
    border:none;
    background-color: #fff;
    color: #000;
    
}
    .deng_left{
        height: calc(100vh - 100px);
        background-color: #fff;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
   
  
    .el-main{
        background-color: #f5f5f5;
    }
</style>